@import "../styles/variables";


$header-icon-color: #e1e1e1;
$header-width: 200px;
$header-bar-width: 20px;
$content-bg: #e6e6e9;

.sms-preview-holder {
	width: $header-width;
}

.sms-preview-mock {
	background: #fff;
	border: 1px solid #CDCDD3;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
	border-radius: 2px;
}

.sms-preview {
	height: 256px;
	overflow: auto;
	padding: 0 12px 12px;
}

.sms-preview-header {
	height: 25px;
	position: relative;

	&:before {
		background: $header-icon-color;
		border-radius: 50%;
		box-shadow: 4px 0 0 $header-icon-color, 8px 0 0 $header-icon-color, 12px 0 0 $header-icon-color, 16px 0 0 $header-icon-color;
		content: ' ';
		height: 3px;
		position: absolute;
			left: 16px;
			top: 11px;
		width: 3px;
	}
	
	&:after {
		background: $header-icon-color;
		content: ' ';
		height: 3px;
		position: absolute;
			left: ($header-width - $header-bar-width) / 2;
			top: 11px;
		width: 20px;
	}
}

.sms-preview-battery {
	border: 2px solid $header-icon-color;
	border-radius: 2px;
	height: 3px;
	position: absolute;
		right: 16px;
		top: 9px;
	width: 10px;
	
	&:before {
		background: $header-icon-color;
		content: ' ';
		height: 3px;
		position: absolute;
			left: 0;
			top: 0;
		width: 6px;
	}

	&:after {
		background: $header-icon-color;
		border-radius: 0 3px 3px 0;
		content: ' ';
		height: 5px;
		position: absolute;
			right: -3px;
			top: -1px;
		width: 2px;
	}
}

.sms-preview-content {
	background: $content-bg;
	border-radius: 5px;
	color: #3a3a3a;
	font-size: 12px;
	margin-top: 20px;
	min-height: 17px;
	padding: 6px 10px;
	position: relative;
		z-index: 1;
	width: 138px;
	word-break: break-all;

	&:before {
		background: $content-bg;
		content: ' ';
		height: 10px;
		position: absolute;
			left: -12px;
			top: 100%;
		transform: skew(-40deg, -20deg) translateY(-11px);
		width: 10px;
	}

	a {
		color: #0076ff;
	}
}

.sms-tag-preview {
	color: #155197;
}

.sms-preview-stat {
	color: #acacac;
	font-size: 12px;
	margin: 10px;
}

.sms-preview-num {
	color: #3a3a3a;
	font-size: 14px;
}

.sms-preview-tips {
	background: #fdfed6;
	border: 1px solid #ffddc7;
	color: #666;
	font-size: 12px;
	padding: 4px 8px;
}
